import './index.scss'
import { DotLoading } from 'antd-mobile'
import { useHeader } from './useProRem'
import Title from '@/components/HomeTitle'
import ProCard from '@/components/ProductCard'

const ProductNav = () => {
    // 逻辑业务
    const { headers, imgs, isLoading } = useHeader()
    // UI 渲染
    return (
      <div>
        {isLoading?<div className='content-box'><span>Loading</span><DotLoading /></div>:
        <div className='container content-box'>
          <Title caption={headers}/>
            <div className='product-nav'> 
              {imgs.map((item) => (
                  <ProCard 
                    src={item.line_image} 
                    alt={item.alt} 
                    title={item.title} 
                    link={`/${item.router}/list/${item.id}`}
                    key={item.id} 
                    classname='item-product-home'
                  />
                ))}
            </div>
          </div>}

      </div>
    )
  }
  
  export default ProductNav
  